import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router';
import {Button,Row,Col,Layout, Menu, Breadcrumb,Select,Icon,Form,Input,Affix,Modal,Pagination,message,Rate} from 'antd';
import reqwest from 'reqwest';
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less'
import {numvail,selectvail} from '../../utils/Validator.js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
// import inon from '../../styles/font_kuzarzakl8bh85mi/iconfont.css'
// import {reqwest_post} from '../../utils/Reqwest.js'
import {datevali_deta} from '../../utils/Validator.js'
const FormItem = Form.Item;
const Option =Select.Option;
class ClueDetails extends React.Component{
	constructor(props){
		super(props);
		this.state={
			loading:false,
			editorContents: [],
		}
	}
	handleSubmit(e){
    // console.log(e)
    e.preventDefault();
    let _this=this;

    this.props.form.validateFields((err, values) => {
    	// values.remark.a="1"
    	// values.remark.date=datevali_deta(new Date());
     //  values.remark.name=JSON.parse(window.localStorage['setting']).name;
        console.log(values);
// debugger
			// for(let i of values.remark.blocks){
			// 	return
			// }
      if (!err) {
        console.log('Received values of form: ', values);
        // if(_this.props.location.pathname=='/app/newclue'){
	      	_this.loadserver(values)
	      // }else{
	      	// _this.pacthServer(values)
	      // }
      }else{
      	console.log(2)
      }
    });
	}
	componentWillMount(){
		// this.loadserver();
		console.log(this.props.location.pathname)
	}
	// pacthServer(params={}){
	// 	this.setState({loading:true});
 //    const {province, city,area,street} =this.state;
 //    let _this= this;
 //  	reqwest({
 //      url: window.host+'/api/clues/update_me',
 //      method: 'post',
 //      crossOrigin: true,
 //      data: {
 //      	id:_this.props.location.query.ims,
 //        access_token:localStorage['token'],
 //        clue:{name:params.name,mobile:params.mobile,address:params.address,remark:params.remark},
 //      },
 //      type: 'json',
 //    }).then((data) => {
 //      if(data.status=='success'){
	// 			message.success('更新成功',1,()=>{
	// 				window.location.hash='/app/clues?current='+_this.props.location.query.current;
	// 			})
	// 		}else{
	// 			this.setState({loading:false});
	// 			message.warning(data.msg,1)
	// 		}
 //    }).fail((err)=>{
 //    	this.setState({loading:false});
	// 		console.log(2)
	// 	})
 //  }
	loadserver (params = {}) {
    console.log('params:', params);
    this.setState({loading:true});
    let _data=[];
    let _this=this;
    // let _
    let remark;
    if(params.remark!==undefined){
    	console.log(params.remark.blocks[0].text==="")
    	// debugger
    	if(params.remark.blocks[0].text===""&&params.remark.blocks.length==1){
    		remark='null'
    		// return
    	}else{
	    	params.remark.date=datevali_deta(new Date());
	      params.remark.name=JSON.parse(window.localStorage['setting']).name;
	      remark=JSON.stringify(params.remark)
	    }
    }
    // console.log(remark)
    // return
    reqwest({
      url: window.host+'/api/clues',
      method: 'post',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        clue:{name:params.name,mobile:params.phone,address:params.address,remark:remark,pound:params.pound},
      },
      type: 'json',
    }).then((data) => {
      console.log(data);
      // if()
      if(data.status=='success'){
      	message.success('保存成功',0.5,()=>{
     		  window.location.hash='/app/clues?current='+_this.props.location.query.current;

      	})
      }else{
      	this.setState({loading:false});
      	message.warning(data.msg,1);
      }
    }).fail( (err, msg) =>{
    	this.setState({loading:false});
       message.error('无网络链接',1);
    })
  }
  onEditorStateChange(index, editorContent){
    let editorContents = this.state.editorContents;
    editorContents[index] = editorContent;
    editorContents = [...editorContents];
    this.setState({
      editorContents,
    });
  }
	render(){
	  const { editorContents } = this.state;
		const formItemLayout = {
      labelCol: { span: 7},
      wrapperCol: { span: 17 },
      style:{minWidth:200}
    };
  	const {getFieldDecorator}=this.props.form;
		return(
			<Layout >
				<Layout.Content className={`${style.berad}`} >
					<Row>
						<Breadcrumb  className={`${style.blue_dia_none}`}>
							<Breadcrumb.Item ><span className={`${style.blue_dia}`}></span></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div} ${style.bread_div_first}`}><Link to={{pathname:'/app/clues',query:{current:this.props.location.query.current}}}>线索</Link></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div}`}>新建线索</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
				</Layout.Content>
				<Layout style={{background:'#fff'}}>
				<Form className={`${inStyle.ncc_left_layout}`} onSubmit={this.handleSubmit.bind(this)} >
					<Row style={{marginTop:26}}>
						<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:17,pull:0}} >
							<FormItem {...formItemLayout} label='手机'>
								{getFieldDecorator('phone',{
									initialValue:undefined,
									rules:[{required:true,message:'请输入手机号码',validator:(rule,value,callback)=>{
										numvail(rule,value,callback)
									}}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='手机' />
								)}
							</FormItem>
						</Col>
					</Row>
       		<Row >
						<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:17,pull:0}} >
							<FormItem  {...formItemLayout} label='姓名'>
								{getFieldDecorator('name',{
									initialValue:undefined,
									rules:[{required:true,message:'请输入姓名'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='姓名' />
								)}
							</FormItem>
						</Col>
					</Row>
					<Row >
						<Col sm={{span :8,pull:0}} className={`${style.reset_col}`} xs={{span:17,pull:0}} >
							<FormItem  {...formItemLayout} label='地址'>
								{getFieldDecorator('address',{
								initialValue:undefined,
									rules:[{required:true,message:'请输入地址'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='地址' />
								)}
							</FormItem>
						</Col>
					</Row>
					<Row >
						<Col sm={{span :8,pull:0}} className={`${style.reset_col}`} xs={{span:17,pull:0}} >
							<FormItem  {...formItemLayout} label='优先级'>
								{getFieldDecorator('pound',{
									initialValue:undefined,
								})(
									<Rate  count={5}  onChange={(e)=>console.log(e)} allowHalf={false} />
								)}
							</FormItem>
						</Col>
					</Row>
       		<Row>
	       		<Col className={`${style.reset_col}`}  span={8}>
								<FormItem {...formItemLayout} label='备注'>
								{getFieldDecorator('remark',{
									initialValue:undefined,
								})(
                  // <Input className={`${style.ncc_reset_input}`} placeholder='备注' />
									<Editor toolbarHidden editorStyle={{fontSize:14,margin:0}} wrapperStyle={{border:'1px solid #cecece',borderRadius:4,width:360,minHeight:100}} />
								)}
							</FormItem>
						</Col>
       		</Row>

       		<Row>
	       		<Col xl={{offset:3}} lg={{offset:2}} sm={{span :8,pull:0}} xs={{span:17,pull:3}}  >
		       		<div  style={{float:'left'}} >
		       			<FormItem >
			            <Button loading={this.state.loading} htmlType="submit" size='large' type="primary"  >
			              保存
			            </Button>
		          	</FormItem>
		          </div>
		          <div  style={{float:'left',marginLeft:10}} >
		          	<Button size='large'  >
			            <Link to={{pathname:'/app/clues',query:{current:this.props.location.query.current}}}>取消</Link>
			          </Button>
		          </div>
	          </Col>
          </Row>
				</Form>
			</Layout>
			</Layout>
		)
	}
}

// <div>
									// 	<Rate character='低' count={1} value={this.state.pound==1?1:undefined} onChange={(e)=>this.setState({pound:1})} allowHalf={false} />
									// 	<Rate character='中' count={1} value={this.state.pound==2?2:undefined} onChange={(e)=>this.setState({pound:2})} allowHalf={false} />
									// 	<Rate character='高' count={1} value={this.state.pound==3?3:undefined} onChange={(e)=>this.setState({pound:3})} allowHalf={false} />
									// </div>
const ClueDetailsForm = Form.create()(ClueDetails);

export default connect()(ClueDetailsForm);
